<template>
    <div class="payBox">
        <el-row>
            <el-col
                :span="8"
                v-for="(o, index) in 1"
                :key="o"
                :offset="index > 0 ? 2 : 0"
            >
                <el-card :body-style="{ padding: '0px' }">
                    <img
                        src="../parkingList/images/a665bda60acd4660de3b37ca3e8c5ba9.jpg"
                        class="image"
                    />
                    <div style="padding: 14px">
                        <div>
                            <p>车位号:{{ list.number }}</p>
                            <p>发布时间:{{ list.time }}</p>
                            <p>价格:{{ list.price }}</p>
                            <p>租车周期:{{ list.cycle }}</p>
                            <p>车位地址:{{ list.address }}</p>
                        </div>
                        <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>
                            <el-button type="text" class="button" @click="pay"
                                >生成订单</el-button
                            >
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const {
    mapActions: parkingMapActions,
    mapActions: ordersgMapActions,
    mapState: parkingMapState,
} = createNamespacedHelpers("parkingList", "orders"); //主仓库引入子仓库的名称,

export default {
    props: ["id"],
    data() {
        return {
            currentDate: new Date(),
            list: {},
            arr: this.id.split(","),
        };
    },
    methods: {
        ...parkingMapActions([
            "getAllParkings",
            "getParkingsById",
            "changeParkingState",
        ]),
        pay() {
            //修改车位数据
            this.changeParkingState(this.arr[0]);
            this.$router.push(
                "/system/ordersList/" + this.arr[0] + "," + this.arr[1]
            );
        },
    },
    async mounted() {
        const data = await this.getParkingsById(this.arr[0]);
        if (data.status) {
            this.list = data.data[0];
        }
    },
};
</script>

<style>
.payBox {
    text-align: center;
}
.time {
    font-size: 13px;
    color: #999;
}
.el-row {
    display: flex;
    justify-content: center;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}
.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}
</style>